@charset "utf-8";
*{
    margin:0;
    padding:0;
}
@keyframes rotateimg {
    100%{ transform: rotate(360deg); }
}
@keyframes rotateball{  
    100%{ transform:rotate(360deg); }
}
@keyframes scaleimg{
    40%{ transform: scale(1); }
    60%{ transform: rotate(10deg); }
    80%{ transform: rotate(-10deg);  }
    90%{
        transform: rotate(10deg); 
    }
    100%{
        transform: rotate(-10deg); 
    }
}
@keyframes jijian{
    0%{
        background: url("../img/page3/page3_bg1.png")no-repeat right 10vw  top -10vh;
        
    }
    50%{
        background: url("../img/page3/page3_bg2.png")no-repeat right 10vw  top -10vh;
    }
    100%{
        background: url("../img/page3/page3_bg3.png")no-repeat right 10vw  top -10vh;
    }
}
@keyframes jijianbg{
    0%{
        background: url("../img/page3/page3_person1.png")no-repeat right bottom;
        
    }
    50%{
        background: url("../img/page3/page3_person2.png")no-repeat right bottom;
    }
    100%{
        background: url("../img/page3/page3_person3.png")no-repeat right bottom;
    }
}
@keyframes run{
    100%{ transform: translateX(0); } 
}
@keyframes opacityTxt{
    100%{
        opacity: 1;
    }
}
@keyframes big{
    100%{
        transform:scale(1.3);
    }
}

@keyframes personrotate{
    50%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(5deg);
    }
}
@keyframes pageimg{
    100%{
        transform: scale(1);
    }
}
@keyframes tel{
    30%{
        transform: scale(1);
    }
    60%{
        transform: rotate(-5deg);
    }
    90%{
        transform: rotate(5deg);
    }
}
@keyframes pageimg{
    15%{
        transform: translateX(-10px) rotate(-5deg);
    }
    30%{
        transform: translateX(0) rotate(0);
    }
     100%{
        transform: translateX(0) rotate(0);
    }
}
@keyframes opacityimg{
    20%{
       
    }
    50%{ opacity:1 ;
        transform: scale(0.8);
    }
    70%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1); 
        opacity:1 ;

    }
}
@keyframes personrotate1{
    10%{
        transform: translateX(-10vw);
    }
    99%{
        transform: rotate(0);
    }
    100%{
        display: none;
    }
}
@keyframes disnone{
//    10%{
//         transform: translateX(-10vw);
//     }
    0%{
        opacity: 1;
    }
    100%{
       
        opacity: 0;
    }
}





//音乐播放按钮
#page_btn{
    position:fixed;
    top:5vh;
    right:5vw;
    z-index:999;
}

@keyframes bg_music{
    100%{
        transform: rotate(360deg);
    }
}
//背景音乐
#page_btn{
    transform: scale(0.7);
}
.page_btn{
    animation: bg_music 1s linear infinite;
}






//第一页
.page1{
    position: relative;
    overflow: hidden;
    .page1_bg{
        width:25%;
        height:100vh;
        float:left;
    }
    .bg1{
        background-color:#04ff55;
        opacity: 0.5;
        transform: translateY(-100vh);
        
    }
    .bg2{
        background-color:#04ff55;
        opacity: 0.5;
        transform: translateY(-100vh);
       
    }
    .bg3{
        background-color:#04ff55;
        opacity: 0.5;
        transform: translateY(-100vh);
       
    }
    .bg4{
        background-color:#04ff55;
        opacity: 0.5;
        transform: translateY(-100vh);
    }

    .page1_img{
        position: absolute;
        top:-10vh;
        left:-50vw;
        z-index:2;
        transform: translateY(-100vh);
        
        img{
            width:170%;
        }
    }
    .page1_grey{
        width:80vw;
        height:15vh;
        background-color: #48916c;
        position: absolute;
        top:35vh;
        left:-12vw;
        transform:translateX(-100vw) rotate(0);
        z-index:3;
        
    }
    .page1_yellow{
        position: absolute;
        top:140px;
        left:-110px;
        z-index:4;
        transform: translateX(300vw);
        
    }
    .page1_ball{
        position: absolute;
        left:-10vw;
        bottom:-30vh;
        z-index:5;
        transform: scale(0);
        transition: transform 1s linear;
        transition-delay: 3900ms;
        
    }
    .page1_rio{
        position: absolute;
        top:0;
        left:-10vw;
        z-index:6;
        transform:translateX(-100vw);
        transition:all 300ms linear;
        transition-delay: 4000ms; 
    }
    .page1_person{
        position: absolute;
        top:6vh;
        left:10vw;
        z-index: 7;
        .page1_people{
            transform:translateY(100vh);
            transition:all 300ms linear;
            transition-delay: 4000ms;
        }
    }
    .page1_want{
        width:120%;
        height:15vh;
        background-color: #e6e6e6;
        position: absolute;
        bottom:10vh;
        left:-10vw;
        z-index:8;
        transform:translateY(100vh) rotate(0);
        transition: all 1s linear 4500ms;
        .page1_image{
            transform: rotate(9deg);
            width:100vw;
            height:100%;
            margin:auto;
            img{
                position: absolute;
                z-index:9;
                top:-15vh;
                //left:5vw;
                transform: scale(0.7);
            }
        }
    }
    .page1_text{
        position: absolute;
        left:10vw;
        top:35vh;
        color:#0092ff;
        z-index:10;
        font-weight: 600;
        transform: translateY(-100vh);
        transition: all 1s linear 5s;
        h2{
            font-size:20px;
        }
    }

}
.page1.act .bg1{
    transform: translateY(0);
    opacity: 1;
    transition:all 1s linear;
    transition-delay: 400ms;
}
.page1.act .bg2{
    transform: translateY(0);
    opacity: 1;
    transition:all 1s linear;
    transition-delay: 300ms;
}
.page1.act .bg3{
    transform: translateY(0);
    opacity: 1;
    transition:all 1s linear;
    transition-delay: 300ms;
}
.page1.act .bg4{
    transform: translateY(0);
    opacity: 1;
    transition:all 1s linear;
}
.page1.act .page1_grey{
    transform: translateX(0) rotate(-30deg);
    transition:all 300ms linear;
    transition-delay:3000ms;
}
.page1.act .page1_yellow{
    transform: translateX(0);
    transition:all 300ms linear;
    transition-delay: 3000ms;
}
.page1.act .page1_img{
    transform: translateY(0);
    transition: transform 500ms linear 3200ms;
}
.page1.act .page1_img img{
    animation:rotateimg 3s infinite;
    animation-timing-function: linear;
    animation-delay: 3000ms;
}
.page1.act .page1_ball{
    transform: scale(1);
}
.page1.act .page1_ball img{
    animation: rotateball 2s linear infinite 3s;
}
.page1.act .page1_rio{
    transform: translateX(0);
}
.page1.act .page1_person{
    .page1_people{
        transform: translateY(0);
    }
    animation: scaleimg 2s linear;
    animation-iteration-count: 3;
    animation-delay: 300ms;
}
.page1.act .page1_want{
    transform:translateY(0) rotate(-5deg);
}
.page1.act .page1_want .page1_image img{
    animation: scaleimg 1s linear infinite;
    animation-delay: 300ms;
    
}
.page1.act .page1_text{
    transform: translateY(0);
}



// 第二页
.page2{
    background: url("../img/page2/page2_bg.png");
    position: relative;
    overflow: hidden;
    .page2_text1{
        position: absolute;
        top:10vh;
        left:5vw;
        font-size:25px;
        color:#268592;
        font-weight: 600;
        
        span{
            font-size:40px;
        }
    }
    .page2_text2{
        position: absolute;
        top:5vh;
        left:10vw;
        font-size:25px;
        color:#fff;
        font-weight: 600;
        opacity: 0;
        span{
            font-size:40px;
        }
    }
    .page2_text3{
        position: absolute;
        top:20vh;
        left:10vw;
        font-size:25px;
        color:#fff;
        font-weight: 600;
        opacity: 0;
    }
    .page2_text4{
        position: absolute;
        top:27vh;
        left:10vw;
        font-size:25px;
        color:#268592;
        font-weight: 600;
    }
    .page2_img1{
        position: absolute;
        top:15vh;
        right:-65vw;
        animation: rotateimg 10s linear infinite 1s;
    }
    .page2_img2{
        position: absolute;
        top:10vh;
        right:-68vw;
        animation: rotateimg 10s linear infinite 1500ms;
    }
    .page2_circle1{
        width:85vw;
        height:50vh;
        background-color: #268592;
        border-radius: 50%;
        position: absolute;
        bottom:-2vh;
        left:-36vw;
        z-index:3;
        transform: translateX(-100vw);
        transition:transform 1s linear 300ms;
    }
    .page2_circle2{
        width:85vw;
        height:50vh;
        background-color: #f4ff01;
        border-radius: 50%;
        position: absolute;
        bottom:-2vh;
        left:-40vw;
        z-index:4;
        transform: translateX(-100vw);
        transition:transform  200ms linear 5000ms;
    }
    .page2_p{
        width:50vw;
        height:40vh;
        position: absolute;
        bottom:5vh;
        left:0;
        z-index:5;
        padding-left:10px;
        color:#0092ff;
        opacity: 0;
        font-size:14px;
        font-weight:600;
    }
}
.page2.act .page2_text2,.page2.act .page2_text3{
    animation: opacityTxt 2s linear 300ms; 
    animation-fill-mode: forwards;
}
.page2.act .page2_p{
    animation: opacityTxt 1s linear 4000ms; 
    animation-fill-mode: forwards;
}
.page2.act .page2_circle1{
    transform: translateX(0);
    animation: big 1s linear 500ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
}
.page2.act .page2_circle2{
    transform: translateX(0);
    animation: big 1s linear 1500ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 2;
}


// 第三页
.page3{
    position: relative;
    overflow: hidden;
   .page3_bg1{
       width:100vw;
       height:100vh;
       position: absolute;
       left:0;
       top:0;
       z-index:1;
       background: url("../img/page3/page3_bg1.png")no-repeat right 0  top -10vh;
   }
    .page_left{
        position: absolute;
        left:0;
        top:0;
        width:30vw;
        height: 100vh;
        background: #f4ff01;
        z-index:5;
        opacity: 0.8;
        transform: translateY(100vh);
        transition: all 1s linear 300ms;
    }
    .page_middle{
        position: absolute;
        top:0;
        left:30vw;
        width:0;
        height:0;
        border-width:100vh 0 0 20vw;
        border-style:solid;
        border-color:transparent #f4ff01;
        z-index:5;
        opacity: 0.8;
        transform: translateY(100vh);
        transition: all 1s linear 300ms;
    }
    .page_right{
        position: absolute;
        top:0;
        right:0;
        width:50vw;
        height: 100vh;
        background: #09a1ef;
        z-index:5;
        opacity: 0.8;
        transform: translateY(-100vh);
        transition: all 1s linear 300ms;
    }
    .page_last{
        position: absolute;
        top:0;
        right:50vw;
        width:0;
        height:0;
        border-width:0 20vw 100vh 0;
        border-style:solid;
        border-color:transparent #09a1ef;
        z-index:5;
        opacity: 0.8;
        transform: translateY(-100vh);
        transition: all 1s linear 300ms;
    }
    .page3_bg2{
        width:100vw;
        height:100vh;
        position: absolute;
        bottom:0;
        right:0;
        z-index:6;
        background: url("../img/page3/page3_bg1.png")no-repeat right 10vw  top -10vh;
    }
    .page3_text{
        width:100vw;
        height:20vh;
        position: absolute;
        bottom:0;
        left:0;
        z-index:7;
        transform: translateY(50vh);
        transition: all 1s linear 1000ms;
        h2{
            font-size:40px;
            color:#fff;
            text-shadow:5px 5px 10px #0092ff;
        }
        p{
            font-size:25px;
            color:#fff;
            text-shadow:5px 5px 10px #0092ff;
        }
    }
    .page3_text1{
        position: absolute;
        top:0;
        right:0;
        width:60vw;
        height:50vh;
        padding:10px 10px 0 0;
        color:#fff;
        z-index:9;
        transform: translateX(100vw);
        transition: all 1s linear 1200ms;
        p{
            line-height: 25px;
            font-size:12px;
        }
    }
   .page3_run{
      position:absolute;
      top:0;
      left:10vw;
      z-index:11;
      transform: translateX(100vw);
   }
    .page3_run1,.page3_run2,.page3_run3,.page3_run4{
      position:absolute;
      top:0;
      left:10vw;
      z-index:10;
      transform: translateX(100vw);
   }
}
.page3.act .page3_bg1{
    animation: jijian 1500ms linear 1000ms;
    animation-fill-mode: forwards ;
}
.page3.act .page3_bg2{
    animation: jijianbg 1500ms linear 1000ms;
    animation-fill-mode: forwards;
}
.page3.act .page_left,.page3.act .page_middle{
    transform: translateY(0);
}
.page3.act .page_last,.page3.act .page_right{
    transform: translateY(0);
}
.page3.act .page3_text{
    transform: translateY(0);
}
.page3.act .page3_text1{
    transform: translateX(0);
}
.page3.act .page3_run{
    transform: translateX(0);
    transition:all 1s linear 2300ms;
}
.page3.act .page3_run1{
    animation: run 1s linear 2500ms infinite;
    animation-fill-mode: forwards;
}
.page3.act .page3_run2{
     animation: run 1s linear 2600ms infinite;
    animation-fill-mode: forwards;
}
.page3.act .page3_run3{
    animation: run 1s linear 2700ms infinite;
    animation-fill-mode: forwards;
}
.page3.act .page3_run4{
     animation: run 1s linear 2800ms infinite;
    animation-fill-mode: forwards;
}
// 第四页
.page4{
    position: relative;
    overflow: hidden;
    .page4_blue{
        position: absolute;
        top:0;
        left:0;
        z-index:5;
        .page4_img1{
            margin-top:10vh;
            transform:translateX(-150vw) rotate(-90deg);
            
        }
        .page4_img {
            margin-top:-21vh;
//         transform:translateX(-100vw);
          
           transform: scale(1);
           img{
            opacity: 1;
           }
        }
    }
    .page4_bg1{
        position:absolute;
        top:0;
        right:0;
        width:0;
        height:0;
        border-width:0 120vw 90vh 0;
        border-style:solid;
        border-color:transparent #3169db;
        z-index:2;
        transform: translate(-120vw,-90vh);
    }
    .page4_bg2{
        position:absolute;
        top:0;
        left:0;
        width:0;
        height:0;
        border-width:92vh 0  0 120vw;
        border-style:solid;
        border-color:transparent  #21fd8c ;
        z-index:3;
        transform: translate(-120vw,-92vh);
    }
    .page4_bg3{
        position:absolute;
        left:0;
        bottom:0;
        width:0;
        height:0;
        border-width:50vh 0  0 120vw;
        border-style:solid;
        border-color:transparent  #f5ff01;
        z-index:4;
        transform: translate(-120vw,-50vh);
    }
    .page4_person{
        position: absolute;
        top:9vh;
        left:0;
        z-index:11;
        //transform: translateX(100vw);
       opacity: 0;
        
    }
    .page4_text{
        position:absolute;
        top:5vh;
        left:8vw;
        z-index:10;
        opacity: 0;
        ul{
            list-style: disc;
            width:80vw;
            li{
                padding:5;
                font-size:12px;
                color:#fff;
                line-height: 3vh;
            }
        }
    }
    .page4_txt{
        position:absolute;
        bottom:5vh;
        left:10vw;
        z-index: 11;
        opacity: 0;
        h2{
            color:#fff;
            font-size:34px;
        }
        h3{
            color:#fff;
            font-size:24px;
        }
    }
    .page4_t,.page4_t1,.page4_t2{
        position:absolute;
        top:10vh;
        left:9vw;
        z-index:10;
        transform:translateX(-150vw) rotate(-90deg);
    }
}

.page4.act .page4_blue .page4_img1{
    animation: personrotate1 2500ms linear;
    animation-iteration-count: 1;
    
}

.page4.act .page4_blue .page4_img{
    animation: disnone 5500ms linear forwards ;
    animation-iteration-count: 1;

    // animation-fill-mode: forwards;
}
.page4.act .page4_bg1{
    transform: translate(0,0);
    transition:transform 300ms linear 1s;
}
.page4.act .page4_bg2{
    transform: translate(0,0);
    transition:transform 300ms linear 1500ms;
}
.page4.act .page4_bg3{
    transform: translate(0,0);
    transition:transform 300ms linear 2000ms;
}
.page4.act .page4_person{
    // transform: translateX(0);
    // transition:all 300ms linear 1700ms;
    animation: opacityimg 1s linear 2200ms;
    animation-fill-mode: forwards;
}
// .page4.act .page4_person img{
//     animation: pageimg 200ms linear 2000ms;
//     animation-fill-mode: forwards;
// }
.page4.act .page4_text{
    animation: opacityTxt 300ms linear 3s;
    animation-fill-mode: forwards;
}
.page4.act .page4_txt{
    animation: opacityTxt 300ms linear 3s;
    animation-fill-mode: forwards;
}
.page4.act .page4_t{
    transform: translateX(0) rotate(0);
    transition:all 1s linear 3500ms;
}
.page4.act .page4_t1{
    transform: translateX(0) rotate(0);
    transition:all 1s linear 3700ms;
}
.page4.act .page4_t2{
    transform: translateX(0) rotate(0);
    transition:all 1s linear 3900ms;
}
//第五页
.page5{
    position:relative;
    overflow: hidden;
    img{
        display: block;
    }
    .page5_bg{
        width:100vw;
        height:100vh;
        position:absolute;
        top:0;
        left:0;
        background-color: #f5ff01;
    }
    .page5_round1{
        position:absolute;
        bottom:0;
        left:0;
        z-index:2;
        transform: translateX(-100vw);
        img{
            width:100%;
            height:100vh;
        }
    }
    .page5_round2{
        position:absolute;
        bottom:0;
        left:0;
        z-index:3;
        transform: translateX(-100vw);
    }
    .page5_round3{
        position:absolute;
        bottom:0;
        left:0;
        z-index:4;
        transform: translateX(-100vw);
   }
   .page5_round4{
        position:absolute;
        bottom:0;
        left:0;
        z-index:5;
        transform: translateX(-100vw);

   }
   .page5_round5{
        position:absolute;
        bottom:29vh;
        left:45vw;
        z-index:6;
        transform: translateX(-100vw);
   }
  .page5_head1{
       position:absolute;
       right:0;
       bottom: 0;
       z-index:7;
       transform: translateX(100vw);
   }
    .page5_head2{
        position:absolute;
        right:0;
        bottom:0;
        z-index:8;
        transform: translateX(100vw);
    }
    .page5_head3{
        position:absolute;
        right:0;
        bottom:0;
        z-index:9;
        transform: translateX(100vw);
    }
    .page5_head{
        position:absolute;
        right:0;
        bottom:22vh;
        z-index:10;
        transform: translateX(100vw);
    }
    .page5_text{
        width:180vw;
        height:30vh;
        position:absolute;
        top:-10vh;
        left:-15vw;
        z-index:11;
        color:#fff;
        background: #09A1EF;
        padding-top:3vh;
        border-bottom:5px solid #000000;
        transform: rotate(0deg) translateY(-100vh);
        .page5_txt{
//          transform: rotate(2deg);
              ul{
                list-style: disc;
                width:80vw;
                padding-left:30vw;
                
                padding-top:7vh;
                li{
                    line-height:5vh;
                    font-size:12px;
                }
            }
        }
      
    }
    .page5_title{
        position:absolute;
        bottom:0;
        left:10vw;
        z-index:12;
        transform: translateY(50vh);
        h2{
            color: #fff;
            font-size:40px;
            color:#0092FF;
            text-shadow: 0 4px  #fff;;
        }
        h3{
            color:#fff;
            font-size:25px;
            padding-top:3vh;
            padding-bottom:2vh;
        }
    }
}
.page5.act .page5_round1,.page5.act .page5_head1{
    transform: translateX(0);
    transition: all 200ms linear;
}
.page5.act .page5_round2,.page5.act .page5_head2{
    transform: translateX(0);
    transition: all 200ms linear 300ms;
}
.page5.act .page5_round3,.page5.act .page5_head3{
    transform: translateX(0);
    transition: all 200ms linear 500ms;
}
.page5.act .page5_round4,.page5.act .page5_head{
    transform: translateX(0);
    transition: all 200ms linear 700ms;
}
.page5.act .page5_round5{
    transform: translateX(0);
    transition: all 200ms linear 900ms;
    animation: scaleimg  1s linear 1200ms infinite;
}
.page5.act .page5_text{
    transform: rotate(-5deg) translateY(0);
    transition:all 1s linear 1500ms;
}
.page5.act .page5_text ul{
     transform: rotate(5deg); 
     transition:all 1s linear 1500ms;
}
.page5.act .page5_title{
    transform: translateY(0);
    transition:all 1s linear 2s;
}

//第六页
.page6{
    position:relative;
    overflow: hidden;
    img{
        display: block;
        width:100vw;
        height:100vh;
    }
    .page6_text{
        width:70vw;
        height:10vh;
        position:absolute;
        top:20vh;
        right:5vw;
        z-index:2;
        background: #0092FF; 
        transform: translateX(100vw);
    }
    .page6_p{
        font-size:40px;
        font-weight: 600;
        color:#fff; 
        position:absolute;
        top:16vh;
        right:10vw;
        z-index:3;
        text-shadow: 0 -4px #0092FF;
        transform: translateX(100vw);
    }
    .page6_tip{
        position:absolute;
        bottom:5vh;
        left:40vw;
        z-index: 4;
        transform: translateX(100vw);
        ul{
            list-style: disc;
            li{
                color:#0092FF;
            }
        }
    }
}

.page6.act .page6_text,.page6.act .page6_p,.page6.act .page6_tip{
    transform: translateX(0);
    transition:all 500ms linear 300ms;
}


//第七页
.page7{
    position:relative;
    overflow: hidden;
    .page7_bg{
        width:100vw;
        height:100vh;
        position:absolute;
        top:0;
        left:0;
        background-color: #04FF55;
    }
     .page1_img{
        position: absolute;
        top:-10vh;
        left:-50vw;
        z-index:2;
        img{
            width:170%;
        }
    }
    .page1_yellow{
        position:absolute;
        top:0;
        left:-30vw;
        z-index:3;
    }
    .page1_ball{
        position: absolute;
        bottom:0;
       left:-20vw;
        z-index:4;
    }
    .page1_person{
        position:absolute;
        top:-10vh;
        left:0;
        z-index:5;
    }
    .page7_title{
        width:100vw;
        height:10vh;
        line-height:10vh;
        position:absolute;
        left:0;
        top:45vh;
        z-index:6;
        background: #fff;
        .page7_tel{
            width:30vw;
            height:5vh;
            line-height:5vh;
            text-align:center;
            background: orange;
            float:left;
            margin-top:2.5vh;
            margin-left:2vw;
            color:#fff;
            transform: scale(0.5);
        }
        p{
            float:left;
            font-size:12px;
            margin-left:5vw;
        }
    }
    .page7_blank{
        width:100vw;
        height:45vh;
        position: absolute;
        left:0;
        bottom:0;
        z-index:7;
        background: #fff;
    }
}

.page7.act .page1_img img{
    animation:rotateimg 4s infinite;
    animation-timing-function: linear;
}
.page7.act .page1_person{
    .page1_people{
        transform: translateY(0);
    }
    animation: scaleimg 2s linear;
    animation-iteration-count: 3;
    animation-delay: 300ms;
}
.page7.act .page7_tel{
    animation: tel 1s linear infinite;
}

//第八页
.page8{
    position:relative;
    overflow: hidden;
    .page8_bg{
          img{
            height:100vh;
            display: block;
        }
    }
     .page8_pic1{
        position:absolute;
        top:10vh;
        left:10vw;
        z-index:2;
        width:110px;
        height:115px;
        background: #fff;
        border-radius:10px;
        img{
            border-radius:10px;
        }
    }
    .page8_pic2{
        position:absolute;
        top:5vh;
        right:5vw;
        z-index:2;
        width:115px;
        height:95px;
        background: #fff;
        border-radius:10px;
        img{
            border-radius:10px;
        }
    }
    .page8_pic3{
        position:absolute;
        top:25vh;
        right:8vw;
        z-index:2;
        width:115px;
        height:115px;
        background: #fff;
        border-radius:10px;
        img{
            border-radius:10px;
        }
    }
    .page8_text{
        position:absolute;
        top:35vh;
        left:10vw;
        z-index:3;
        color:#fff;
        font-size:20px;
    }
}

.page8.act .page8_pic1,.page8.act .page8_pic2,.page8.act .page8_pic3{
    animation: pageimg 500ms linear  300ms infinite;
}

//第九页
.page9{
    position:relative;
    overflow: hidden;
    .page9_bg{
        width:120vw;
        height:100vh;
        position:absolute;
        top:0;
        left:0;
        img{
            width:120vw;
            height:100vh;
        }
    }
    .page9_black{
       width:100vw;
       height:100vh;
       position:absolute;
       top:0;
       left:0;
       z-index:2;
       background: gray;
       opacity: 0.8;
    }
    .page9_head{
        width:30vw;
        height:18vh;
        position:absolute;
        left:35vw;
        top:12vh;
        z-index:4;
        img{
            width:100%;
            height:100%;
            border-radius: 10px;
        }
    }
    .page9_text{
        width:100vw;
        height:10vh;
        line-height:10vh;
        text-align: center;
        position:absolute;
        top:30vh;
        left:0;
        z-index:5;
        color:#fff;
        font-size:20px;
    }
    .page9_more{
        width:100vw;
        height:10vh;
        position:absolute;
        left:0;
        bottom:20vh;
        z-index:7;
        input{
            width:40vw;
            height:6vh;
            background:#0092FF;
            line-height: 6vh;
            text-align: center;
            color:#fff;
            border:none;
            outline: none;
            border-radius: 10px;
            margin-left:30vw;
        }
    }
}


//-wekit-text-stroke
//清除按钮样式
input{
    appearance:none;
    -webkit-appearance:none;
}
